<template>
    <div class="waybill-search-container">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="operation-buttons">
                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
                    title="这是一段内容确定删除吗？">
                    <el-button slot="reference">批量操作</el-button>
                </el-popconfirm>
                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
                    title="这是一段内容确定导入吗？">
                    <el-button slot="reference"> 导入 </el-button>
                </el-popconfirm>
                <el-button type="primary" @click="exportExcel()"> 导出 </el-button>

                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
                    title="这是一段内容确定打印吗？">
                    <el-button slot="reference"> 打印 </el-button>
                </el-popconfirm>
            </div>
            <el-form-item label="是否到站">
                <el-select v-model="ruleForm.isArrived" placeholder="全部">
                    <el-option label="已到站" value="已到站"></el-option>
                    <el-option label="未到站" value="未到站"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="始发地" prop="origin">
                <el-cascader v-model="originSelected" :options="pcaTextArr" @change="handleOriginChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="目的地" prop="destination">
                <el-cascader v-model="destinationSelected" :options="pcaTextArr" @change="handleDestinationChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="到站日期">
                <el-col :span="11">
                    <el-form-item prop="actualArrivalTime">
                        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                            v-model="ruleForm.actualArrivalTime1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="actualArrivalTime">
                        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                            v-model="ruleForm.actualArrivalTime2" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入关键词搜索" v-model="ruleForm.pickupOrderId"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAll('ruleForm')">搜索</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="pickupOrderId" label="提货单">
            </el-table-column>
            <el-table-column prop="waybillId" label="运单号">
            </el-table-column>
            <el-table-column prop="orderId" label="订单号">
            </el-table-column>
            <el-table-column prop="customer" label="客户">
            </el-table-column>
            <el-table-column prop="origin" label="始发地">
            </el-table-column>
            <el-table-column prop="destination" label="目的地">
            </el-table-column>
            <el-table-column prop="isArrived" label="是否到站">
            </el-table-column>
            <el-table-column prop="shippingAddress" label="发货地址">
            </el-table-column>
            <el-table-column prop="receivingAddress" label="收货地址">
            </el-table-column>
            <el-table-column prop="driverName" label="司机">
            </el-table-column>
            <el-table-column prop="driverPhone" label="手机号码">
            </el-table-column>
            <el-table-column prop="licensePlate" label="车牌号">
            </el-table-column>
            <el-table-column prop="quantity" label="提货数量">
            </el-table-column>
            <el-table-column label="计划发车时间" prop="plannedDepartureTime">
            </el-table-column>
            <el-table-column label="实际发车时间" prop="actualDepartureTime">
            </el-table-column>
            <el-table-column label="计划到达时间" prop="plannedArrivalTime">
            </el-table-column>
            <el-table-column label="实际到达时间" prop="actualArrivalTime">
            </el-table-column>
            <el-table-column label="提货开始时间" prop="pickupStartTime">
            </el-table-column>
            <el-table-column label="提货完成时间" prop="pickupCompletionTime">
            </el-table-column>
            <el-table-column label="创建时间" prop="creationTime">
            </el-table-column>
            <el-table-column prop="volume" label="提货体积（m3）">
            </el-table-column>
            <el-table-column prop="weight" label="提货重量（kg）">
            </el-table-column>
            <el-table-column prop="totalFreight" label="提货运费合计（元）">
            </el-table-column>
            <el-table-column prop="creator" label="创建人">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.isArrived === '未到站'" @click="updateIsArrived(scope.row.id)" type="text"
                        size="small">整车到站</el-button>
                    <el-button v-if="scope.row.isArrived === '未到站'" @click="updateIsArrived(scope.row.id)" type="text"
                        size="small">订单到站</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import axios from 'axios';
import { pcaTextArr } from 'element-china-area-data';
export default {
    data() {
        return {
            ruleForm: {
                origin: '',
                destination: '',
                pickupStatus: '',
                pickupStartTime: '',
                pickupCompletionTime: '',
            },
            tableData: [],
            multipleSelection: [],
            pcaTextArr:pcaTextArr,
            originSelected: [],
            destinationSelected: [],
            options: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            Waybill: [],
            Vehicle: [],
            Driver: [],
            ruleForm: {},
            dialogTableVisible: false,
            form2: {},
        };
    },
    methods: {
        handleOriginChange(val) {
            // 将级联选择的数组值转换为字符串（如：["省", "市", "区"] -> "省/市/区"）
            this.originSelected=val;
            this.ruleForm.origin = val ? val.join('/') : '';
            // this.ruleForm.origin = val ? this.convertCodesToText(val) : '';
        },
        handleDestinationChange(val) {
            this.destinationSelected=val;
            this.ruleForm.destination = val ? val.join('/') : '';
            // this.ruleForm.destination = val ? this.convertCodesToText(val) : '';
        },
        exportExcel(){
            const url = '/api/om/pickup-order/exportExcel';
            window.location.href = url;
        },
        updateIsArrived(id) {
            this.$confirm("确定货物已到站吗?", "操作确认", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    // 修正URL拼接错误
                    axios.post(`/api/om/pickup-order/updateIsArrived?id=${id}`)
                        .then((res) => {
                            this.$message({
                                type: "success",
                                message: "操作成功!",
                            });
                            this.getAll();
                        })
                        .catch((error) => {
                            // 处理错误信息
                            this.$message({
                                type: "error",
                                message: "操作失败: " + error.message,
                            });
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消操作",
                    });
                });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        resetForm() {
            this.ruleForm = {};
            this.getAll();
        },
        getAll() {
            axios.post(`/api/om/pickup-order/getAll?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.ruleForm).then((res) => {
                this.tableData = res.data.records;
                this.total = res.data.total;
            });
        },
        handleSizeChange(val) {
            console.log(`每页 val 条`);
            this.pageSize = val;
            this.getAll();
        },
        handleCurrentChange(val) {
            console.log(`每页 val 条`);
            this.pageNum = val;
            this.getAll();
        },
        findWaybill() {
            axios.post('/api/om/waybill/findWaybill').then((res) => {
                this.Waybill = res.data;
            }).catch((err) => {
                console.log(err);
                this.$message.error('请求出错: ' + err.message);
            });
        },
        findVehicle() {
            axios.post('/api/om/vehicle/findVehicle').then((res) => {
                this.Vehicle = res.data;
            }).catch((err) => {
                console.log(err);
                this.$message.error('请求出错: ' + err.message);
            });
        },
        findDriver() {
            axios.post('/api/om/driver/findDriver').then((res) => {
                this.Driver = res.data;
            }).catch((err) => {
                console.log(err);
                this.$message.error('请求出错: ' + err.message);
            });
        },
    },
    created() {
        this.getAll();
        this.findVehicle();
        this.findDriver();
        this.findWaybill();
    },
}
</script>
<style scoped>
.waybill-search-container {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
}

.operation-buttons {
    margin-bottom: 10px;
}

.line {
    text-align: center;
}
</style>